1. Color processing
Color is the most sensitive thing of human vision. The color of the homepage is handled well, which can be the icing on the cake and achieve a multiplier effect with half the effort. The general application principle of color should be "overall coordination, partial contrast", that is: the overall color effect of the homepage should be harmonious, and only local and small areas can have some strong color contrast. In the use of colors, different main colors can be used according to the needs of the homepage content. Because colors are symbolic, for example, tender green, emerald green, golden yellow, and gray brown can respectively symbolize spring, summer, autumn, and winter. Secondly, there are occupational logo colors, such as olive green for military police and white for medical and health care. Color also has obvious psychological feelings, such as cold and warm feelings, forward and backward effects, etc. In addition, color also has national characteristics. Due to the influence of factors such as environment, culture, tradition, etc., there are also big differences in color preferences. Making full use of these characteristics of color can make our homepage have a deep artistic connotation, thereby enhancing the cultural taste of the homepage.
Here are several commonly used color schemes:
1. Warm colors. That is, the combination of red, orange, yellow, ochre and other colors. The use of this color tone can make the homepage present a warm, warm and welcoming atmosphere.
2. Cool colors. That is, the combination of cyan, green, purple and other colors. The use of this color tone can make the homepage present a tranquil, cool and elegant atmosphere.
3. Contrast tones. That is to match colors with completely opposite chromaticity in the same space. For example: red and green, yellow and purple, orange and blue, etc. This combination of colors can produce a strong visual effect, giving people a bright, bright, and festive feeling. Of course, if the contrast color is not used properly, it will backfire and produce tacky and dazzling undesirable effects. This is to grasp the important principle of "major harmony, small contrast", that is, the overall tone should be unified and harmonious, and there can be some small strong contrasts in local areas.
Finally, we must also consider the depth and lightness of the background color (background color) of the homepage. Here we borrow a term from photography, namely "high-key" and "low-key". Light background is called high-key; dark background is called low-key. If the background color is dark, the color of the text should be light, and the light content (text or picture) should be set off with a dark background; conversely, the color of the text should be darker if the background is light, and the dark background should be set off with a light background Content (text or picture). This change in depth is called "brightness change" in color science. On some homepages, the background color is black, but the text also uses a darker color. Because the brightness of the color is relatively close, the reader will feel very tired when reading it, which affects the reading effect. Of course, the brightness of the color cannot be changed too much, otherwise the brightness contrast on the screen will be too strong, and the reader's eyes will also be unbearable.
Webpage color matching
The color of a webpage is one of the keys to establishing a website's image, but color matching is a headache for netizens. What kind of colors should be used for the background, text, icons, borders, hyperlinks... of the webpage, and what colors should be matched to best express the intended connotation? Ajie talks about some experience here, I hope to inspire you.
First, let's first understand some basic knowledge of color:
1. Color is produced by the refraction of light.
2. Red, yellow and blue are the three primary colors, other colors can be blended with these three colors. The color expression in the html language of the webpage is represented by the numerical values of these three colors. For example: red is color (255,0,0), the hexadecimal representation method is (FF0000), white is (FFFFFF), we often see The "bgColor=#FFFFFF" means that the background color is white.
3. The color is divided into two types: achromatic and color. Achromatic colors refer to the black, white, and gray system colors. Color refers to all colors except achromatic colors.
4. Any color has the properties of saturation and transparency, and changes in properties produce different hues, so at least millions of colors can be produced.
Is it better to use color or non-color for web page production? According to research by professional research institutions, the memory effect of color is 3.5 times that of black and white. In other words, in general, color pages are more attractive than completely black and white pages.
Our usual practice is: use non-color (black) for the main content text, use color for borders, backgrounds, and pictures. In this way, the overall page is not monotonous, and the main content will not be dizzy.
●Non-color matching
Black and white is the most basic and simple collocation, white characters on a black background, and white characters on a black background are very clear. Gray is a universal color, which can be matched with any color, and it can also help two opposing colors to transition harmoniously. If you really can't find the right color, try using gray, the effect will never be too bad.
●Color matching
Colors are ever-changing, and color matching is the focus of our research. We still need to further learn some knowledge of color.
1. Color circle. We press "red->yellow->green->blue->red" to over-gradually change the color to get a color circle. The two ends of the color circle are warm and cold, and the middle is medium. (As shown below)
Red, orange, orange, yellow, yellow, green, green, cyan, blue, green, blue, blue, purple, purple, purple, red, red
|___________| |____| |_________| |_________| | | | |
Warm color neutral system Cold color neutral system
2. Psychological feeling of color. Different colors will give viewers different psychological feelings.
Red --- is an exciting color. The stimulating effect can make people feel impulsive, anger, enthusiasm and vitality.
Green---in the middle of the two colors of cold and warm, it looks harmonious, tranquil, healthy and safe. It can be combined with golden and pale white to create an elegant and comfortable atmosphere.
Orange---is also an exciting color, with the effect of lightness, joy, warmth, warmth and fashion.
Yellow-has a personality of happiness, hope, wisdom and briskness, it has the highest brightness.
Blue --- is the coolest, fresh and professional color. Mixed with white, it can reflect the soft, elegant and romantic atmosphere (like the color of the sky:)
White-has a white, bright, innocent and clean feeling.
Black-with deep, mysterious, silent, sad, depressed feelings.
Gray---has a sense of moderation, ordinary, gentle, modest, neutral and elegant.
A slight change in saturation and transparency of each color will produce a different feeling. Take green as an example. Yellow-green has youthful and vigorous visual mood, while blue-green is quiet and dark.
●Principle of web color matching
1. The vividness of the color. The colors of the web pages should be bright and easily noticeable.
2. The uniqueness of color. Have a distinctive color, so that everyone has a strong impression of you. (Refer to the second part of the design thinking of the standard color section of the website CI)
3. The suitability of color. It means that the color matches the atmosphere of the content you express. For example, use pink to reflect the flexibility of female sites.
4. Color association. Different colors will produce different associations. Blue thinks of the sky, black thinks of the night, red thinks of happy events, etc. The choice of color must be related to the connotation of your web page.
●The process of webpage color mastery
With the accumulation of webpage production experience, we have such a trend of color: single color -> colorful -> standard color -> single color. At the beginning, because of lack of technology and knowledge, I could only make a simple web page with a single color; after having a certain foundation and materials, I hope to make a beautiful web page, stacking the best pictures I have collected and the most satisfactory colors on the page ; But after a long time, I found that the colors are messy, without personality and style; the third time I reposition my website, choose the color that suits my own, and the launched site is often more successful; when the final design concept and technology reach the peak, then Back to simplicity, simple and beautiful sites can be designed with a single color or even achromatic color.
○ Tips for web color matching